<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1832207" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon ic">&#xe75f;</span>
                <div class="name">douban-fill</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf1e8;</span>
                <div class="name">linux</div>
                <div class="code-name">&amp;#xf1e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf205;</span>
                <div class="name">opera</div>
                <div class="code-name">&amp;#xf205;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf216;</span>
                <div class="name">qq</div>
                <div class="code-name">&amp;#xf216;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf229;</span>
                <div class="name">safari</div>
                <div class="code-name">&amp;#xf229;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf234;</span>
                <div class="name">snapchat-ghost</div>
                <div class="code-name">&amp;#xf234;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf262;</span>
                <div class="name">weixin</div>
                <div class="code-name">&amp;#xf262;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf266;</span>
                <div class="name">windows</div>
                <div class="code-name">&amp;#xf266;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe8c4;</span>
                <div class="name">stars</div>
                <div class="code-name">&amp;#xe8c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe600;</span>
                <div class="name">apple</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe601;</span>
                <div class="name">blackberry</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe602;</span>
                <div class="name">centos</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe603;</span>
                <div class="name">fedora</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe604;</span>
                <div class="name">redhat</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe605;</span>
                <div class="name">ubuntu</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe606;</span>
                <div class="name">suse</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf052;</span>
                <div class="name">mobile-alt</div>
                <div class="code-name">&amp;#xf052;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf06b;</span>
                <div class="name">paw</div>
                <div class="code-name">&amp;#xf06b;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf161;</span>
                <div class="name">android</div>
                <div class="code-name">&amp;#xf161;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf178;</span>
                <div class="name">chrome</div>
                <div class="code-name">&amp;#xf178;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf195;</span>
                <div class="name">edge</div>
                <div class="code-name">&amp;#xf195;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf1a1;</span>
                <div class="name">firefox</div>
                <div class="code-name">&amp;#xf1a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf1d4;</span>
                <div class="name">internet-explorer</div>
                <div class="code-name">&amp;#xf1d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf1eb;</span>
                <div class="name">markdown</div>
                <div class="code-name">&amp;#xf1eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf2a5;</span>
                <div class="name">grin-squint-tears</div>
                <div class="code-name">&amp;#xf2a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe901;</span>
                <div class="name">preview</div>
                <div class="code-name">&amp;#xe901;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe61b;</span>
                <div class="name">arrow_uturn_right_circle</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe67b;</span>
                <div class="name">link_circle</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe69d;</span>
                <div class="name">person_circle</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe6d1;</span>
                <div class="name">sunrise_fill</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe71e;</span>
                <div class="name">moon_stars_fill</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef82;</span>
                <div class="name">compress</div>
                <div class="code-name">&amp;#xef82;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xefb4;</span>
                <div class="name">expand</div>
                <div class="code-name">&amp;#xefb4;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef13;</span>
                <div class="name">align-justify</div>
                <div class="code-name">&amp;#xef13;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef14;</span>
                <div class="name">align-left</div>
                <div class="code-name">&amp;#xef14;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xefb8;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xefb8;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf071;</span>
                <div class="name">pen-nib</div>
                <div class="code-name">&amp;#xf071;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef75;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xef75;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe680;</span>
                <div class="name">flag</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe619;</span>
                <div class="name">at</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe68d;</span>
                <div class="name">file-text</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe651;</span>
                <div class="name">clipboard</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xefbd;</span>
                <div class="name">feather</div>
                <div class="code-name">&amp;#xefbd;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf059;</span>
                <div class="name">music</div>
                <div class="code-name">&amp;#xf059;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf06a;</span>
                <div class="name">pause-circle</div>
                <div class="code-name">&amp;#xf06a;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef7f;</span>
                <div class="name">comments</div>
                <div class="code-name">&amp;#xef7f;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf07f;</span>
                <div class="name">play-circle</div>
                <div class="code-name">&amp;#xf07f;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef5b;</span>
                <div class="name">calendar-check</div>
                <div class="code-name">&amp;#xef5b;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef1b;</span>
                <div class="name">angle-up</div>
                <div class="code-name">&amp;#xef1b;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf19d;</span>
                <div class="name">facebook</div>
                <div class="code-name">&amp;#xf19d;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf1d3;</span>
                <div class="name">instagram</div>
                <div class="code-name">&amp;#xf1d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf231;</span>
                <div class="name">skype</div>
                <div class="code-name">&amp;#xf231;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf239;</span>
                <div class="name">stack-overflow</div>
                <div class="code-name">&amp;#xf239;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf274;</span>
                <div class="name">youtube</div>
                <div class="code-name">&amp;#xf274;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe6c1;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf0d4;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xf0d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf037;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xf037;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf063;</span>
                <div class="name">paper-plane</div>
                <div class="code-name">&amp;#xf063;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf2dd;</span>
                <div class="name">user-circle</div>
                <div class="code-name">&amp;#xf2dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe8fc;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe8fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef1a;</span>
                <div class="name">angle-down</div>
                <div class="code-name">&amp;#xef1a;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe812;</span>
                <div class="name">calendar-alt</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe8ed;</span>
                <div class="name">fort-awesome</div>
                <div class="code-name">&amp;#xe8ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf03e;</span>
                <div class="name">magic</div>
                <div class="code-name">&amp;#xf03e;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe695;</span>
                <div class="name">sakura-black</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe759;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef19;</span>
                <div class="name">angle-left</div>
                <div class="code-name">&amp;#xef19;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef23;</span>
                <div class="name">arrow-circle-right</div>
                <div class="code-name">&amp;#xef23;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef66;</span>
                <div class="name">check-circle</div>
                <div class="code-name">&amp;#xef66;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xefb5;</span>
                <div class="name">exclamation-circle</div>
                <div class="code-name">&amp;#xefb5;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf02b;</span>
                <div class="name">info-circle</div>
                <div class="code-name">&amp;#xf02b;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf050;</span>
                <div class="name">minus-circle</div>
                <div class="code-name">&amp;#xf050;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf082;</span>
                <div class="name">plus-circle</div>
                <div class="code-name">&amp;#xf082;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf299;</span>
                <div class="name">file-word</div>
                <div class="code-name">&amp;#xf299;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef65;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xef65;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf109;</span>
                <div class="name">times</div>
                <div class="code-name">&amp;#xf109;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf039;</span>
                <div class="name">list-ol</div>
                <div class="code-name">&amp;#xf039;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef1c;</span>
                <div class="name">archive</div>
                <div class="code-name">&amp;#xef1c;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef1f;</span>
                <div class="name">angle-right</div>
                <div class="code-name">&amp;#xef1f;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef25;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xef25;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef2a;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xef2a;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef64;</span>
                <div class="name">chart-area</div>
                <div class="code-name">&amp;#xef64;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef6e;</span>
                <div class="name">chevron-left</div>
                <div class="code-name">&amp;#xef6e;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef6f;</span>
                <div class="name">chevron-right</div>
                <div class="code-name">&amp;#xef6f;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xef7a;</span>
                <div class="name">coffee</div>
                <div class="code-name">&amp;#xef7a;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xefae;</span>
                <div class="name">envelope</div>
                <div class="code-name">&amp;#xefae;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xefb6;</span>
                <div class="name">external-link-alt</div>
                <div class="code-name">&amp;#xefb6;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf013;</span>
                <div class="name">heart</div>
                <div class="code-name">&amp;#xf013;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf017;</span>
                <div class="name">heartbeat</div>
                <div class="code-name">&amp;#xf017;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf0a8;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xf0a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf0bd;</span>
                <div class="name">sitemap</div>
                <div class="code-name">&amp;#xf0bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf0f3;</span>
                <div class="name">tags</div>
                <div class="code-name">&amp;#xf0f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf0fc;</span>
                <div class="name">th</div>
                <div class="code-name">&amp;#xf0fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf107;</span>
                <div class="name">thumbtack</div>
                <div class="code-name">&amp;#xf107;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf10a;</span>
                <div class="name">times-circle</div>
                <div class="code-name">&amp;#xf10a;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf17e;</span>
                <div class="name">creative-commons</div>
                <div class="code-name">&amp;#xf17e;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf1b4;</span>
                <div class="name">github</div>
                <div class="code-name">&amp;#xf1b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf24d;</span>
                <div class="name">twitter</div>
                <div class="code-name">&amp;#xf24d;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf261;</span>
                <div class="name">weibo</div>
                <div class="code-name">&amp;#xf261;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xf278;</span>
                <div class="name">address-card</div>
                <div class="code-name">&amp;#xf278;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe765;</span>
                <div class="name">zhihu</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon ic">&#xe76a;</span>
                <div class="name">netease-cloud-music-line</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'ic';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#ic') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.ic {
  font-family: "ic" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="ic"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"ic" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon ic i-douban"></span>
            <div class="name">
              douban-fill
            </div>
            <div class="code-name">.i-douban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-linux"></span>
            <div class="name">
              linux
            </div>
            <div class="code-name">.i-linux
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-opera"></span>
            <div class="name">
              opera
            </div>
            <div class="code-name">.i-opera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-qq"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">.i-qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-safari"></span>
            <div class="name">
              safari
            </div>
            <div class="code-name">.i-safari
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-snapchat-ghost"></span>
            <div class="name">
              snapchat-ghost
            </div>
            <div class="code-name">.i-snapchat-ghost
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-weixin"></span>
            <div class="name">
              weixin
            </div>
            <div class="code-name">.i-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-windows"></span>
            <div class="name">
              windows
            </div>
            <div class="code-name">.i-windows
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-stars"></span>
            <div class="name">
              stars
            </div>
            <div class="code-name">.i-stars
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-apple"></span>
            <div class="name">
              apple
            </div>
            <div class="code-name">.i-apple
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-blackberry"></span>
            <div class="name">
              blackberry
            </div>
            <div class="code-name">.i-blackberry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-centos"></span>
            <div class="name">
              centos
            </div>
            <div class="code-name">.i-centos
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-fedora"></span>
            <div class="name">
              fedora
            </div>
            <div class="code-name">.i-fedora
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-redhat"></span>
            <div class="name">
              redhat
            </div>
            <div class="code-name">.i-redhat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-ubuntu"></span>
            <div class="name">
              ubuntu
            </div>
            <div class="code-name">.i-ubuntu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-suse"></span>
            <div class="name">
              suse
            </div>
            <div class="code-name">.i-suse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-mobile-alt"></span>
            <div class="name">
              mobile-alt
            </div>
            <div class="code-name">.i-mobile-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-paw"></span>
            <div class="name">
              paw
            </div>
            <div class="code-name">.i-paw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-android"></span>
            <div class="name">
              android
            </div>
            <div class="code-name">.i-android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-chrome"></span>
            <div class="name">
              chrome
            </div>
            <div class="code-name">.i-chrome
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-edge"></span>
            <div class="name">
              edge
            </div>
            <div class="code-name">.i-edge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-firefox"></span>
            <div class="name">
              firefox
            </div>
            <div class="code-name">.i-firefox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-internet-explorer"></span>
            <div class="name">
              internet-explorer
            </div>
            <div class="code-name">.i-internet-explorer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-markdown"></span>
            <div class="name">
              markdown
            </div>
            <div class="code-name">.i-markdown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-smile"></span>
            <div class="name">
              grin-squint-tears
            </div>
            <div class="code-name">.i-smile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-preview"></span>
            <div class="name">
              preview
            </div>
            <div class="code-name">.i-preview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-share"></span>
            <div class="name">
              arrow_uturn_right_circle
            </div>
            <div class="code-name">.i-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-link-circle"></span>
            <div class="name">
              link_circle
            </div>
            <div class="code-name">.i-link-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-person"></span>
            <div class="name">
              person_circle
            </div>
            <div class="code-name">.i-person
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-sun"></span>
            <div class="name">
              sunrise_fill
            </div>
            <div class="code-name">.i-sun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-moon"></span>
            <div class="name">
              moon_stars_fill
            </div>
            <div class="code-name">.i-moon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-compress"></span>
            <div class="name">
              compress
            </div>
            <div class="code-name">.i-compress
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-expand"></span>
            <div class="name">
              expand
            </div>
            <div class="code-name">.i-expand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-align-justify"></span>
            <div class="name">
              align-justify
            </div>
            <div class="code-name">.i-align-justify
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-align-left"></span>
            <div class="name">
              align-left
            </div>
            <div class="code-name">.i-align-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-eye"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.i-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-pen"></span>
            <div class="name">
              pen-nib
            </div>
            <div class="code-name">.i-pen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.i-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-flag"></span>
            <div class="name">
              flag
            </div>
            <div class="code-name">.i-flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-at"></span>
            <div class="name">
              at
            </div>
            <div class="code-name">.i-at
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-file"></span>
            <div class="name">
              file-text
            </div>
            <div class="code-name">.i-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-clipboard"></span>
            <div class="name">
              clipboard
            </div>
            <div class="code-name">.i-clipboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-feather"></span>
            <div class="name">
              feather
            </div>
            <div class="code-name">.i-feather
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-music"></span>
            <div class="name">
              music
            </div>
            <div class="code-name">.i-music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-pause"></span>
            <div class="name">
              pause-circle
            </div>
            <div class="code-name">.i-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-comments"></span>
            <div class="name">
              comments
            </div>
            <div class="code-name">.i-comments
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-play"></span>
            <div class="name">
              play-circle
            </div>
            <div class="code-name">.i-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-calendar-check"></span>
            <div class="name">
              calendar-check
            </div>
            <div class="code-name">.i-calendar-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-angle-up"></span>
            <div class="name">
              angle-up
            </div>
            <div class="code-name">.i-angle-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-facebook"></span>
            <div class="name">
              facebook
            </div>
            <div class="code-name">.i-facebook
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-instagram"></span>
            <div class="name">
              instagram
            </div>
            <div class="code-name">.i-instagram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-skype"></span>
            <div class="name">
              skype
            </div>
            <div class="code-name">.i-skype
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-stack-overflow"></span>
            <div class="name">
              stack-overflow
            </div>
            <div class="code-name">.i-stack-overflow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-youtube"></span>
            <div class="name">
              youtube
            </div>
            <div class="code-name">.i-youtube
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-list-alt"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.i-list-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-star"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.i-star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-link-alt"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.i-link-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-paper-plane"></span>
            <div class="name">
              paper-plane
            </div>
            <div class="code-name">.i-paper-plane
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-user"></span>
            <div class="name">
              user-circle
            </div>
            <div class="code-name">.i-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.i-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-angle-down"></span>
            <div class="name">
              angle-down
            </div>
            <div class="code-name">.i-angle-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-calendar"></span>
            <div class="name">
              calendar-alt
            </div>
            <div class="code-name">.i-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-home"></span>
            <div class="name">
              fort-awesome
            </div>
            <div class="code-name">.i-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-magic"></span>
            <div class="name">
              magic
            </div>
            <div class="code-name">.i-magic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-sakura"></span>
            <div class="name">
              sakura-black
            </div>
            <div class="code-name">.i-sakura
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.i-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-angle-left"></span>
            <div class="name">
              angle-left
            </div>
            <div class="code-name">.i-angle-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-arrow-circle-right"></span>
            <div class="name">
              arrow-circle-right
            </div>
            <div class="code-name">.i-arrow-circle-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-check-circle"></span>
            <div class="name">
              check-circle
            </div>
            <div class="code-name">.i-check-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-exclamation-circle"></span>
            <div class="name">
              exclamation-circle
            </div>
            <div class="code-name">.i-exclamation-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-info-circle"></span>
            <div class="name">
              info-circle
            </div>
            <div class="code-name">.i-info-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-minus-circle"></span>
            <div class="name">
              minus-circle
            </div>
            <div class="code-name">.i-minus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-plus-circle"></span>
            <div class="name">
              plus-circle
            </div>
            <div class="code-name">.i-plus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-file-word"></span>
            <div class="name">
              file-word
            </div>
            <div class="code-name">.i-file-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.i-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-times"></span>
            <div class="name">
              times
            </div>
            <div class="code-name">.i-times
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-list-ol"></span>
            <div class="name">
              list-ol
            </div>
            <div class="code-name">.i-list-ol
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-archive"></span>
            <div class="name">
              archive
            </div>
            <div class="code-name">.i-archive
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-angle-right"></span>
            <div class="name">
              angle-right
            </div>
            <div class="code-name">.i-angle-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.i-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.i-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-chart-area"></span>
            <div class="name">
              chart-area
            </div>
            <div class="code-name">.i-chart-area
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-chevron-left"></span>
            <div class="name">
              chevron-left
            </div>
            <div class="code-name">.i-chevron-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-chevron-right"></span>
            <div class="name">
              chevron-right
            </div>
            <div class="code-name">.i-chevron-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-coffee"></span>
            <div class="name">
              coffee
            </div>
            <div class="code-name">.i-coffee
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-envelope"></span>
            <div class="name">
              envelope
            </div>
            <div class="code-name">.i-envelope
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-external-link-alt"></span>
            <div class="name">
              external-link-alt
            </div>
            <div class="code-name">.i-external-link-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-heart"></span>
            <div class="name">
              heart
            </div>
            <div class="code-name">.i-heart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-heartbeat"></span>
            <div class="name">
              heartbeat
            </div>
            <div class="code-name">.i-heartbeat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.i-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-sitemap"></span>
            <div class="name">
              sitemap
            </div>
            <div class="code-name">.i-sitemap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-tags"></span>
            <div class="name">
              tags
            </div>
            <div class="code-name">.i-tags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-th"></span>
            <div class="name">
              th
            </div>
            <div class="code-name">.i-th
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-thumbtack"></span>
            <div class="name">
              thumbtack
            </div>
            <div class="code-name">.i-thumbtack
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-times-circle"></span>
            <div class="name">
              times-circle
            </div>
            <div class="code-name">.i-times-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-creative-commons"></span>
            <div class="name">
              creative-commons
            </div>
            <div class="code-name">.i-creative-commons
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-github"></span>
            <div class="name">
              github
            </div>
            <div class="code-name">.i-github
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-twitter"></span>
            <div class="name">
              twitter
            </div>
            <div class="code-name">.i-twitter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-weibo"></span>
            <div class="name">
              weibo
            </div>
            <div class="code-name">.i-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-address-card"></span>
            <div class="name">
              address-card
            </div>
            <div class="code-name">.i-address-card
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-zhihu"></span>
            <div class="name">
              zhihu
            </div>
            <div class="code-name">.i-zhihu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon ic i-cloud-music"></span>
            <div class="name">
              netease-cloud-music-line
            </div>
            <div class="code-name">.i-cloud-music
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="ic i-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            ic" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-douban"></use>
                </svg>
                <div class="name">douban-fill</div>
                <div class="code-name">#i-douban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-linux"></use>
                </svg>
                <div class="name">linux</div>
                <div class="code-name">#i-linux</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-opera"></use>
                </svg>
                <div class="name">opera</div>
                <div class="code-name">#i-opera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-qq"></use>
                </svg>
                <div class="name">qq</div>
                <div class="code-name">#i-qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-safari"></use>
                </svg>
                <div class="name">safari</div>
                <div class="code-name">#i-safari</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-snapchat-ghost"></use>
                </svg>
                <div class="name">snapchat-ghost</div>
                <div class="code-name">#i-snapchat-ghost</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-weixin"></use>
                </svg>
                <div class="name">weixin</div>
                <div class="code-name">#i-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-windows"></use>
                </svg>
                <div class="name">windows</div>
                <div class="code-name">#i-windows</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-stars"></use>
                </svg>
                <div class="name">stars</div>
                <div class="code-name">#i-stars</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-apple"></use>
                </svg>
                <div class="name">apple</div>
                <div class="code-name">#i-apple</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-blackberry"></use>
                </svg>
                <div class="name">blackberry</div>
                <div class="code-name">#i-blackberry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-centos"></use>
                </svg>
                <div class="name">centos</div>
                <div class="code-name">#i-centos</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-fedora"></use>
                </svg>
                <div class="name">fedora</div>
                <div class="code-name">#i-fedora</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-redhat"></use>
                </svg>
                <div class="name">redhat</div>
                <div class="code-name">#i-redhat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-ubuntu"></use>
                </svg>
                <div class="name">ubuntu</div>
                <div class="code-name">#i-ubuntu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-suse"></use>
                </svg>
                <div class="name">suse</div>
                <div class="code-name">#i-suse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-mobile-alt"></use>
                </svg>
                <div class="name">mobile-alt</div>
                <div class="code-name">#i-mobile-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-paw"></use>
                </svg>
                <div class="name">paw</div>
                <div class="code-name">#i-paw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-android"></use>
                </svg>
                <div class="name">android</div>
                <div class="code-name">#i-android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-chrome"></use>
                </svg>
                <div class="name">chrome</div>
                <div class="code-name">#i-chrome</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-edge"></use>
                </svg>
                <div class="name">edge</div>
                <div class="code-name">#i-edge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-firefox"></use>
                </svg>
                <div class="name">firefox</div>
                <div class="code-name">#i-firefox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-internet-explorer"></use>
                </svg>
                <div class="name">internet-explorer</div>
                <div class="code-name">#i-internet-explorer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-markdown"></use>
                </svg>
                <div class="name">markdown</div>
                <div class="code-name">#i-markdown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-smile"></use>
                </svg>
                <div class="name">grin-squint-tears</div>
                <div class="code-name">#i-smile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-preview"></use>
                </svg>
                <div class="name">preview</div>
                <div class="code-name">#i-preview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-share"></use>
                </svg>
                <div class="name">arrow_uturn_right_circle</div>
                <div class="code-name">#i-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-link-circle"></use>
                </svg>
                <div class="name">link_circle</div>
                <div class="code-name">#i-link-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-person"></use>
                </svg>
                <div class="name">person_circle</div>
                <div class="code-name">#i-person</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-sun"></use>
                </svg>
                <div class="name">sunrise_fill</div>
                <div class="code-name">#i-sun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-moon"></use>
                </svg>
                <div class="name">moon_stars_fill</div>
                <div class="code-name">#i-moon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-compress"></use>
                </svg>
                <div class="name">compress</div>
                <div class="code-name">#i-compress</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-expand"></use>
                </svg>
                <div class="name">expand</div>
                <div class="code-name">#i-expand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-align-justify"></use>
                </svg>
                <div class="name">align-justify</div>
                <div class="code-name">#i-align-justify</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-align-left"></use>
                </svg>
                <div class="name">align-left</div>
                <div class="code-name">#i-align-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-eye"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#i-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-pen"></use>
                </svg>
                <div class="name">pen-nib</div>
                <div class="code-name">#i-pen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#i-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-flag"></use>
                </svg>
                <div class="name">flag</div>
                <div class="code-name">#i-flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-at"></use>
                </svg>
                <div class="name">at</div>
                <div class="code-name">#i-at</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-file"></use>
                </svg>
                <div class="name">file-text</div>
                <div class="code-name">#i-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-clipboard"></use>
                </svg>
                <div class="name">clipboard</div>
                <div class="code-name">#i-clipboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-feather"></use>
                </svg>
                <div class="name">feather</div>
                <div class="code-name">#i-feather</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-music"></use>
                </svg>
                <div class="name">music</div>
                <div class="code-name">#i-music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-pause"></use>
                </svg>
                <div class="name">pause-circle</div>
                <div class="code-name">#i-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-comments"></use>
                </svg>
                <div class="name">comments</div>
                <div class="code-name">#i-comments</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-play"></use>
                </svg>
                <div class="name">play-circle</div>
                <div class="code-name">#i-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-calendar-check"></use>
                </svg>
                <div class="name">calendar-check</div>
                <div class="code-name">#i-calendar-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-angle-up"></use>
                </svg>
                <div class="name">angle-up</div>
                <div class="code-name">#i-angle-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-facebook"></use>
                </svg>
                <div class="name">facebook</div>
                <div class="code-name">#i-facebook</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-instagram"></use>
                </svg>
                <div class="name">instagram</div>
                <div class="code-name">#i-instagram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-skype"></use>
                </svg>
                <div class="name">skype</div>
                <div class="code-name">#i-skype</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-stack-overflow"></use>
                </svg>
                <div class="name">stack-overflow</div>
                <div class="code-name">#i-stack-overflow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-youtube"></use>
                </svg>
                <div class="name">youtube</div>
                <div class="code-name">#i-youtube</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-list-alt"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#i-list-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-star"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#i-star</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-link-alt"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#i-link-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-paper-plane"></use>
                </svg>
                <div class="name">paper-plane</div>
                <div class="code-name">#i-paper-plane</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-user"></use>
                </svg>
                <div class="name">user-circle</div>
                <div class="code-name">#i-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#i-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-angle-down"></use>
                </svg>
                <div class="name">angle-down</div>
                <div class="code-name">#i-angle-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-calendar"></use>
                </svg>
                <div class="name">calendar-alt</div>
                <div class="code-name">#i-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-home"></use>
                </svg>
                <div class="name">fort-awesome</div>
                <div class="code-name">#i-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-magic"></use>
                </svg>
                <div class="name">magic</div>
                <div class="code-name">#i-magic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-sakura"></use>
                </svg>
                <div class="name">sakura-black</div>
                <div class="code-name">#i-sakura</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#i-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-angle-left"></use>
                </svg>
                <div class="name">angle-left</div>
                <div class="code-name">#i-angle-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-arrow-circle-right"></use>
                </svg>
                <div class="name">arrow-circle-right</div>
                <div class="code-name">#i-arrow-circle-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-check-circle"></use>
                </svg>
                <div class="name">check-circle</div>
                <div class="code-name">#i-check-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-exclamation-circle"></use>
                </svg>
                <div class="name">exclamation-circle</div>
                <div class="code-name">#i-exclamation-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-info-circle"></use>
                </svg>
                <div class="name">info-circle</div>
                <div class="code-name">#i-info-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-minus-circle"></use>
                </svg>
                <div class="name">minus-circle</div>
                <div class="code-name">#i-minus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-plus-circle"></use>
                </svg>
                <div class="name">plus-circle</div>
                <div class="code-name">#i-plus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-file-word"></use>
                </svg>
                <div class="name">file-word</div>
                <div class="code-name">#i-file-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#i-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-times"></use>
                </svg>
                <div class="name">times</div>
                <div class="code-name">#i-times</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-list-ol"></use>
                </svg>
                <div class="name">list-ol</div>
                <div class="code-name">#i-list-ol</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-archive"></use>
                </svg>
                <div class="name">archive</div>
                <div class="code-name">#i-archive</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-angle-right"></use>
                </svg>
                <div class="name">angle-right</div>
                <div class="code-name">#i-angle-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#i-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#i-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-chart-area"></use>
                </svg>
                <div class="name">chart-area</div>
                <div class="code-name">#i-chart-area</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-chevron-left"></use>
                </svg>
                <div class="name">chevron-left</div>
                <div class="code-name">#i-chevron-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-chevron-right"></use>
                </svg>
                <div class="name">chevron-right</div>
                <div class="code-name">#i-chevron-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-coffee"></use>
                </svg>
                <div class="name">coffee</div>
                <div class="code-name">#i-coffee</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-envelope"></use>
                </svg>
                <div class="name">envelope</div>
                <div class="code-name">#i-envelope</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-external-link-alt"></use>
                </svg>
                <div class="name">external-link-alt</div>
                <div class="code-name">#i-external-link-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-heart"></use>
                </svg>
                <div class="name">heart</div>
                <div class="code-name">#i-heart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-heartbeat"></use>
                </svg>
                <div class="name">heartbeat</div>
                <div class="code-name">#i-heartbeat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#i-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-sitemap"></use>
                </svg>
                <div class="name">sitemap</div>
                <div class="code-name">#i-sitemap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-tags"></use>
                </svg>
                <div class="name">tags</div>
                <div class="code-name">#i-tags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-th"></use>
                </svg>
                <div class="name">th</div>
                <div class="code-name">#i-th</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-thumbtack"></use>
                </svg>
                <div class="name">thumbtack</div>
                <div class="code-name">#i-thumbtack</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-times-circle"></use>
                </svg>
                <div class="name">times-circle</div>
                <div class="code-name">#i-times-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-creative-commons"></use>
                </svg>
                <div class="name">creative-commons</div>
                <div class="code-name">#i-creative-commons</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-github"></use>
                </svg>
                <div class="name">github</div>
                <div class="code-name">#i-github</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-twitter"></use>
                </svg>
                <div class="name">twitter</div>
                <div class="code-name">#i-twitter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-weibo"></use>
                </svg>
                <div class="name">weibo</div>
                <div class="code-name">#i-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-address-card"></use>
                </svg>
                <div class="name">address-card</div>
                <div class="code-name">#i-address-card</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-zhihu"></use>
                </svg>
                <div class="name">zhihu</div>
                <div class="code-name">#i-zhihu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#i-cloud-music"></use>
                </svg>
                <div class="name">netease-cloud-music-line</div>
                <div class="code-name">#i-cloud-music</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
